{% extends "base.html" %}
{% block title %}十六种人格简介{% endblock %}
{% block css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/personality-index.css') }}">
<script src="{{ url_for('static', filename='js/snap.svg-min.js') }}"></script>
{%endblock%}

{% block container %}
        <div class="pi">
            <section id="grid" class="grid">
                {% for type, desc in types_desc %}
                <a href="/personalities/{{ type }}/" data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
                    <figure>
                        <img src="/static/img/{{ loop.index % 8 + 1 }}.png" />
                        <svg viewBox="0 0 180 210" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
                        <figcaption>
                            <h2>{{ type }}</h2>
                            <p>{{ desc }}</p>
                            <button>点击查看详细介绍</button>
                        </figcaption>
                    </figure>
                </a>
                {% endfor %}
            </section>
        </div>
{% endblock %}
{% block js %}
    <script>
        (function() {

            function init() {
                var speed = 330,
                    easing = mina.backout;

                [].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
                    var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
                        pathConfig = {
                            from : path.attr( 'd' ),
                            to : el.getAttribute( 'data-path-hover' )
                        };

                    el.addEventListener( 'mouseenter', function() {
                        path.animate( { 'path' : pathConfig.to }, speed, easing );
                    } );

                    el.addEventListener( 'mouseleave', function() {
                        path.animate( { 'path' : pathConfig.from }, speed, easing );
                    } );
                } );
            }

            init();

        })();
    </script>
{% endblock %}
